<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    /* .display {
        display: block;
    } */
</style>

<body>
    <div id="main">
        <div id="word" style="display: block;">
            <h2>没有一场疫情不会过去，没有一场战争不会结束</h2>
            <p>
                国家卫健委4月11日通报，4月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增新冠肺炎本土确诊病例1164例，<br>
                新增本土无症状感染者26345例。其中，上海新增本土确诊914例，本土无症状感染者25173例。
            </p>
            <br>
        </div>
        <component-one></component-one>
    </div>
</body>
<script>
    Vue.component('component-one', {
        template: '<div><button v-on:click="click">显示/隐藏</div>',
        methods: {
            click: function () {
                let word = document.getElementById('word');
                if (word.style.display == "block") {
                    word.style.display = 'none';
                }
                else {
                    word.style.display = 'block';
                }
            }
        }
    });

    let app = new Vue({
        el: "#main",
        data: {
        },
        components: {
        },
    });
</script>

</html>